<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="app">
        <ul>
            <li v-for="(person, index) in persons" :key="person.id">
                {{ person.id }} - {{ person.name }} - {{ person.age }}
            </li>
        </ul>
        <h2 v-for="(key, value) of car" :key="key">
            {{ key }} : {{ value }}
        </h2>
        <ul>
            <li v-for="(c, index) in hello" :key="index">
                {{ c }}
            </li>
        </ul>

        <ul>
            <li v-for="(value, index) of 4" :key="index">
                {{ value }}
            </li>
        </ul>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '.app',
        data: {
            // 数组
            persons: [
                {id: 1001, name: 'alice', age: 30},
                {id: 3109, name: 'rose', age: 22},
            ],
            // 对象
            car: {
                brand: 'BMW',
                price: 200000.00
            },
            // 字符串
            hello: 'hello'
        }
    })
</script>
</html>